<template>
	<div id="app">
		<transition-group name="list" tag="p">
			<div class="slider-demo-block" v-for="item in array" v-bind:key="item">
				<span class="demonstration">{{item.name}}</span>
				<el-progress :text-inside="true" :stroke-width="14" :percentage="item.percentage" striped
					striped-flow />
			</div>
		</transition-group>
	</div>
</template>

<script>
	import {
		sleep
	} from '@/components/short/short_utils';
	import _ from 'lodash';
	import {
		http
	} from '@/api/http';
	import {
		useRouter
	} from 'vue-router';
	import {
		httpErrorHandle
	} from '@/utils';
	import {
		ContentTypeEnum,
		RequestHttpEnum,
		ModuleTypeEnum
	} from '@/enums/httpEnum';
	export default {
		name: 'App',
		data: function() {
			return {
				array: [], // 初始化数组
			}
		},
		created() {
			this.shuffle();
			setInterval(() => {
				this.shuffle();
			}, 100000);

		},
		methods: {
			async shuffle() {

				await this.getWorkOrderStatistics();
				this.startSort();
			},
			async getWorkOrderStatistics() {
				let router = useRouter();

				// http://localhost:3000/#/stationWorkOrders?status=1
				let take = router.currentRoute.value.query.take;
				let queryType = 1;
				if (take == undefined)
					take = 0;
				var {
					data
				} = await http(RequestHttpEnum.GET)(
					`${ModuleTypeEnum.PROJECT}/workOrderComplateRate/${queryType}/${take}`, null);
				this.array = data;
			},
			/** 冒泡排序 */
			async startSort() {
				const {
					array
				} = this;

				if (Array.isArray(array)) {
					/* 如果不是数组，返回 */
					if (array.length < 1) {
						return array;
					}
					for (let i = 0; i < array.length - 1; i++) {
						for (let j = 0; j < array.length - 1 - i; j++) {
							/* 等待0.8s，渲染执行动画 */
							await sleep(200);
							/** 给’当前值‘和’比较值‘ active样式 */
							if (array[j].percentage <= array[j + 1].percentage) {
								let temp = array[j];
								array[j] = array[j + 1];
								array[j + 1] = temp;
							}
						}
					}
				}
			},
			// 选择排序
			async selectionSort() {
				const {
					array
				} = this;

				var len = array.length;

				var minIndex, temp;

				for (var i = 0; i < len - 1; i++) {

					minIndex = i;

					for (var j = i + 1; j < len; j++) {
						await sleep(200);
						if (array[j].percentage < array[minIndex].percentage) { // 寻找最小的数
							minIndex = j; // 将最小数的索引保存
						}
					}
					temp = array[i];
					array[i] = array[minIndex];
					array[minIndex] = temp;
				}
			},


		}
	}
</script>

<style>
	/** 方块元素的样式 **/
	.list-item {
		display: inline-block;
		margin-right: 10px;
		background-color: orange;
		width: 30px;
		height: 30px;
		line-height: 30px;
		text-align: center;
		color: #ffffff;
	}

	/*** 元素定位改变时动画 ***/
	.list-move {
		transition: transform 1.5s;
	}

	slider-demo-block {
		display: flex;
		/* align-items: center; */
	}

	.slider-demo-block .el-progress {
		margin-top: 0;
		/* margin-left: 12px; */
	}

	.slider-demo-block .demonstration {
		font-size: 12px;
		color: var(--el-text-color-secondary);
		/* line-height: 44px; */
		flex: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		margin-bottom: 0;
	}

	.slider-demo-block .demonstration+.el-progress {
		flex: 0 0 70%;
	}
</style>